在開始今天非常簡單的YoutubeBloc實作前，我們要先和Google申請Youtube Data Api，待會才可以用Youtube Api查詢電影預告片。

申請Youtube Data API

1. 申請網址和之前設定Google登入驗證的地方相同

2. 點選上方「啟用API和服務」
   

3. 找到並點選「Youtube Data APIv3」
   

4. 點選啟用

5. 看到這個頁面就代表啟用成功囉，接下來要建造API Key
   

6. 到建立憑證的地方建立API金鑰
   

7. 幫API金鑰取一個名字，設定這把金鑰只用在Youtube Data API v3。
   

8. 記下你的API Key~

Flutter Youtube api

我有在Dart Pub上找到別人寫好的Youtube api Package，既然都有現成的了，就不用像前幾天還要自己寫呼叫TMDb的api了。

順便把能播放Youtube影片的播放器package一起安裝吧。

詳細資訊請參考Package網址：

• youtube_api
• youtube_player_flutter

Youtube Repository

新增youtube資料夾，新增「youtube_repository.dart」。
程式碼如下：

import 'youtube_api_key.dart';
import 'package:youtube_api/youtube_api.dart';

class YoutubeRepository{
  final YoutubeAPI _youtubeAPI;

  YoutubeRepository({YoutubeAPI youtubeAPI})
    :_youtubeAPI = youtubeAPI ?? YoutubeAPI(youtube_api_key);

  Future<List> search({String keyWord}) async{
    return await _youtubeAPI.search(keyWord);
  }
}

由於複雜的部分(request、decode json...)別人都幫忙寫好了，這邊只要把搜尋關鍵字當作參數呼叫方法等結果回傳就可以了。

youtube api key

在youtube資料夾下新增「youtube_api_key」。
貼上剛剛取得的api key即可。

const String youtube_api_key = 'your_api_key';

Youtube Bloc

已經是第5個實作的bloc了，相信你已經足夠熟悉Bloc Pattern，而且Youtube Bloc超級簡單只需一個Search Event，所以你可以先試著自己寫看看再參考我的程式碼喔。

在youtube資料夾中新增一個「bloc」資料夾，使用bloc generator產生youtubeBloc模板。

fluttube
└───lib
│   └───login
│   └───movie
│   └───register
│   └───youtube
│   │   └───bloc
│   │   │   └───bloc.dart
│   │   │   └───youtube_bloc.dart
│   │   │   └───youtube_event.dart
│   │   │   └───youtube_state.dart
│   │   └───youtube_api_key.dart
│   │   └───youtube_repository.dart
│     ...
│

Youtube State

import 'package:equatable/equatable.dart';
import 'package:meta/meta.dart';
import 'package:youtube_api/youtube_api.dart';

@immutable
abstract class YoutubeState extends Equatable {
  YoutubeState([List props = const []]) : super(props);
}

class YoutubeInitialState extends YoutubeState {
  @override
  String toString() => 'YoutubeInitialState';
}

class YoutubeLoadingState extends YoutubeState {
  @override
  String toString() => 'YoutubeLoadingState';
}

class YoutubeFailedState extends YoutubeState {
  @override
  String toString() => 'YoutubeFailedState';
}

class YoutubeSuccessState extends YoutubeState {
  final List<YT_API> ytResult;
  YoutubeSuccessState(this.ytResult) : super([ytResult]);
  @override
  String toString() => 'YoutubeSuccessState';
}

final List<YT_API> ytResult;中的「YT_API」是包含在youtube_api套件中的類別，雖然名字取的很醜，不過能省去我們自己定義的時間，就將就著用吧。

Youtube Event

import 'package:equatable/equatable.dart';
import 'package:meta/meta.dart';

@immutable
abstract class YoutubeEvent extends Equatable {
  YoutubeEvent([List props = const []]) : super(props);
}

class SearchYoutubeEvent extends YoutubeEvent {
  final keyWord;
  SearchYoutubeEvent(this.keyWord) : super([keyWord]);
  @override
  String toString() => 'Search $keyWord on Youtube';
}

Youtube Bloc

import 'dart:async';
import 'package:bloc/bloc.dart';
import '../youtube.dart';

class YoutubeBloc extends Bloc<YoutubeEvent, YoutubeState> {
  YoutubeRepository _youtubeRepository;
  YoutubeBloc({YoutubeRepository youtubeRepository})
      : assert(youtubeRepository != null),
        _youtubeRepository = youtubeRepository;

  @override
  YoutubeState get initialState => YoutubeInitialState();

  @override
  Stream<YoutubeState> mapEventToState(
    YoutubeEvent event,
  ) async* {
    if (event is SearchYoutubeEvent) {
      yield* _mapSearchToState(event.keyWord);
    }
  }

  Stream<YoutubeState> _mapSearchToState(String keyWord) async* {
    try {
      yield YoutubeLoadingState();
      final ytResult  = await _youtubeRepository.search(keyWord: keyWord);
      yield YoutubeSuccessState(ytResult);
    } catch (_) {
      yield YoutubeFailedState();
    }
  }
}

引入整個youtube資料夾

在youtube資料夾內，新增youtube.dart
貼上以下程式碼：

export 'bloc/bloc.dart';
export 'youtube_repository.dart';

今日總結

我想今天就在完成YoutubeBloc這邊先告一個段落，如果你覺得youtube_api套件提供的功能太少，你也可以自己寫一個去和Youtube Server溝通，實作步驟和ｍovie_api_provider是差不多的。

明天和後天會設計電影細節頁面以及播放Youtube影片的視窗。

完整程式碼在這裡-> FlutTube Github